<template>
  <div id="detail">
    <div class="dc">
      <div class="content w">
        <div class="title fl">商品详情</div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="intro mt20 w clearfix">
      <div class="left fl" style="position: relative;">
        <div class="swiper-container fl">
          <img :src="goods.goodsDetail.goodsCoverImg">
        </div>
      </div>
      <div class="right fr">
        <div class="h3 ml20 mt20">{{ goods.goodsDetail.goodsName }}</div>
        <div class="sub_title mr40 ml20 mt10">{{ goods.goodsDetail.goodsIntro }}</div>
        <div class="item_price mr40 ml20 mt10">
          {{ goods.goodsDetail.sellingPrice }} 元
          <del>
            {{ goods.goodsDetail.originalPrice }} 元
          </del>
        </div>
        <div class="order">
          <input class="car" type="button" @click="saveAndGoCart()" value="立即选购">
          <input class="car" type="button" @click="saveToCart()" value="加入购物车">
        </div>
        <div class="tb-extra ml20" id="J_tbExtra">
          <dl>
            <dt>承诺</dt>
            <dd><a class="J_Cont" title="满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。" href="#"
                target="_blank"><img src="https://wyh-777.oss-cn-nanjing.aliyuncs.com/7d.jpg">7天无理由</a></dd>
          </dl>
          <dl>
            <dt>支付</dt>
            <dd><img src="https://wyh-777.oss-cn-nanjing.aliyuncs.com/%E6%94%AF%E4%BB%98%E5%AE%9D.png" height="20px"
                style="top: 4px;">支付宝
            </dd>
          </dl>
          <dl>
            <dt>支持</dt>
            <dd>假一赔十 <a style="float:none;text-decoration: underline;" href="##">详情</a></dd>
          </dl>

        </div>

      </div>
      <!-- 介绍 -->

    </div>
    <div class="goods mt20 w clearfix">
      <div v-html="goods.goodsDetail.goodsDetailContent"></div>
    </div>

  </div>
</template>

<script>
import '../../assets/mall/styles/detail.css'
import Store from '../../stores/Store.js'
import axios from 'axios'
export default {
  data() {
    return {
      goods: Store()
    }
  },
  created() {
    this.goods.goodsDetail = []
    axios.post('http://localhost:8080/goods/searchGoodsDetail/' + this.$route.query.goodsId).then(resp => {
      this.goods.goodsDetail = resp.data
    })
  },
  methods: {
    saveAndGoCart() {
      if (this.goods.token === 0) {
        this.$router.push('/login')
      } else {
        this.$router.push('/mall/purchase2')
      }

    },
    saveToCart() {
      if (this.goods.token === 0) {
        this.$router.push('/login')
      } else {
        this.$Modal.confirm({
          title: '确认框',
          content: '<p>确定添加购物车吗?</p>',
          onOk: () => {
            this.$Message.info('添加成功');
            axios.post('http://localhost:8080/goods//findCartItem/' + this.goods.userInfo.userId + '/' + this.$route.query.goodsId).then(resp => {
              if (resp.data == false) {
                axios.post('http://localhost:8080/goods//addToCart/' + this.goods.userInfo.userId + '/' + this.$route.query.goodsId).then(resp => {
                  console.log(resp.data);
                  this.goods.cartNumber += 1;
                })
              }
            })

          },
          onCancel: () => {
            this.$Message.info('取消添加');
          }
        });
      }
    }

  }
}
</script>

<style scoped></style>